<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="box">
        <select v-model="province" name="" id="">
            <option value="">请选择</option>
            <option v-for="item in provinces" v-bind:value="item" value="">{{item}}</option>
        </select>
        <select v-model="city" name="" id="">
            <option value="">请选择</option>
            <option v-for="item in citys" v-bind:value="item" value="">{{item}}</option>
        </select>
        <select v-model="district" name="" id="">
            <option value="">请选择</option>
            <option v-for="item in districts" v-bind:value="item" value="">{{item}}</option>
        </select>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                province: "", //省份
                city: "", //城市
                district: "", //地区
                addressData :{
                    "黑龙江省": {
                        "哈尔滨市": {
                            "道里区": {},
                            "南岗区": {},
                        },
                        "齐齐哈尔市": {
                            "龙沙区": {},
                            "建华区": {},
                        }
                    },
                    "吉林省": {
                        "长春市": {
                            "朝阳区" :{},
                            "南关区" :{},
                        },
                        "吉林市": {
                            "船营区": {},
                            "龙潭区": {},
                        }
                    },
                    "四川省": {
                        "宜宾市": {
                            "兴文县": {},
                            "长宁县": {},
                        },
                        "成都市": {
                            "金堂县": {},
                            "双流区": {},
                        }
                    }
                }
            },
            // 计算属性
            computed: {
                provinces: function(){ //获取省份数组
                    if(!this.addressData){
                        return;
                    }
                    var pArr = [];
                    for (var key in this.addressData) { 
                        pArr.push(key);
                    }
                    return pArr;
                },
                citys: function(){ //获取省份对应的城市数组
                    if(!this.addressData || !this.province){
                        return;
                    }
                    var cArr = [];
                    for (var key in this.addressData[this.province]) {
                        cArr.push(key);
                    }
                    return cArr;
                },
                districts: function(){ //获取选择城市对应的地区数组
                    if(!this.addressData || !this.city){
                        return;
                    }
                    var dArr = [];
                    for (var key in this.addressData[this.province][this.city]) {
                        dArr.push(key);
                    }
                    return dArr;
                }
            }
        })

    </script>
    
</body>
</html>